<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Collection</title>
    <link rel="icon" href="../../image/favicon.ico" sizes="16x16">
    <link rel="stylesheet" href="../../css/index.css">
    <link rel="stylesheet" href="../../css/iconfont.css">
    <script src="../../js/jquery-3.7.1.min.js"></script>
    <script src="../../js/main.js"></script>
    <script src="../../js/collection.js"></script>
</head>

<body class="collections">
<input id="color-mode-on" name="color-mode" type="radio"/>
<input id="color-mode-off" name="color-mode" type="radio" checked/>
<input id="switch-pre" name="switch" type="radio" checked/>
<input id="switch-con" name="switch" type="radio"/>
<div class="page">
     <!--全屏遮罩-->
     <div class="mask" id="mask" style="display: none;">
        <div class="footer-info mask-main">
            <div class="mask-close"  id="mask-off">
                <span class="iconfont icon-close"></span>
            </div>
            <div class="footer-group">
                <a class="footer-nav-title" href="../gallery/gallery.html">GALLERY</a>
                <a class="footer-nav-text" href="../gallery/gallery.html">Amoy</a>
                <a class="footer-nav-text" href="../gallery/gallery-1.html">The bank of Laodao river</a>
                <a class="footer-nav-text" href="../gallery/gallery-2.html">UK</a>
            </div>
            <div class="footer-group">
                <a class="footer-nav-title" href="../collection/collection.html">COLLECTION</a>
                <a class="footer-nav-text" href="../collection/collection.html">B&W</a>
                <a class="footer-nav-text" href="../collection/collection-1.html">Architecture</a>
            </div>
            <div class="footer-group">
                <a class="footer-nav-title" href="../introduction/introduction.html">ABOUT YUK1</a>
            </div>
        </div>
    </div>
    <!-- 页眉 导航栏 -->
    <header>
        <div class="shortcut-bar long-nav">
            <div class="shortcut-btn">
                <div id="logged-in-content" class="logged-content">
                    <div class="username">
                        <img src="../../image/logo/logo.png" id="user-icon" class="user-icon nav-icon-short" alt=""/>
                        <div id="username"></div> 
                        <div class="split-line"></div>
                        <div id="city"></div>
                    </div>
                    <div  class="user-icon"><span id="weather"></span></div>
                </div>
                <div id="logged-out-content">
                    <a href="../login/login.html" class="user-icon">
                        <span class="iconfont icon-wode"></span>
                    </a>
                </div>
                <div class="language">ENGLISH</div>
                <div>
                    <label class="color-mode-btn color-mode-on-btn" for="color-mode-on">Color-Aware<span class="iconfont icon-on"></span></label>
                    <label class="color-mode-btn color-mode-off-btn" for="color-mode-off">Color-Aware <span class="iconfont icon-off"></span></label>
                </div>
            </div>
        </div>
        <div class="nav-bar long-nav">
            <div class="nav-container">
                <div class="nav-menu">
                    <a href="../../index.html"><img src="../../image/logo/logo.jpg" class="nav-icon" alt=""/></a>
                    <a href="../gallery/gallery.html" class="nav-bar-item">GALLERY</a>
                    <a href="../collection/collection.html" class="nav-bar-item">COLLECTION</a>
                </div>
                <div class="nav-side-menu" id="mask-on">
                    <span class="iconfont icon-xiaojianju"></span>
                </div>
            </div>
        </div>
    </header>
    <!-- 页面 主体 -->
    <div class="main-container" id="main">
        <div class="main-header">
            <div class="tag">Collection</div>
            <div class="header-btns">
                <div class="btn">
                    <a href="collection-1.html">previous</a>
                </div>
                <div class="btn">
                    <a href="collection-1.html">next</a>
                </div>
            </div>
        </div>
        <div class="nav-info">HOME/COLLECTION/YUK1</div>
        <div class="cover">
            <img src="../../image/COLLECTION/B&W/COLLECTION_B&W_4.JPG" class="cover-img" alt=""/>
            <div class="cover-info">
                <div class="cover-title">
                    <div class="cover-name">B&W</div>
                    <div class="cover-time"> 10/2023</div>
                </div>
                <div class="cover-btns">
                    <div class="cover-btn">
                        <label for="switch-pre" onclick="window.open('#display', '_self')">
                            <span class="iconfont icon-eye7"></span>
                            <span class="text">Previous</span>
                        </label>
                    </div>
                    <div class="cover-btn">
                        <label for="switch-con" onclick="window.open('#display', '_self')">
                            <span class="iconfont icon-program"></span>
                            <span class="text">Contents</span>
                        </label>

                    </div>
                </div>
            </div>
        </div>

        <div class="display-part" id="display">
            <div class="switch-btns">
                <div class="switch-btn switch-pre-btn" id="pre-btn">
                    <label for="switch-pre" >
                    <span class="iconfont icon-eye7"></span><span>Preview</span>
                    </label>
                </div>
                <div class="switch-btn switch-con-btn" id="content-btn">
                    <label for="switch-con">
                        <span class="iconfont icon-program"></span><span>Contents</span>
                    </label>
                </div>
            </div>

            <div class="pre-box">
                <div class="box">
                    <img src="../../image/COLLECTION/B&W/COLLECTION_B&W_1.JPG" alt=""/>  
                </div>
                <div class="anchor">
                    <div class="click">
                        <img src="../../image/COLLECTION/B&W/COLLECTION_B&W_1.JPG" alt=""/>
                    </div>
                    <div class="click">
                        <img src="../../image/COLLECTION/B&W/COLLECTION_B&W_5.JPG" alt=""/>
                    </div>
                    <div class="click">
                        <img src="../../image/COLLECTION/B&W/COLLECTION_B&W_6.JPG" alt=""/>
                    </div>
                    <div class="click">
                        <img src="../../image/COLLECTION/B&W/COLLECTION_B&W_4.JPG" alt=""/>
                    </div>
                    <div class="click">
                        <img src="../../image/COLLECTION/B&W/COLLECTION_B&W_2.JPG" alt=""/>
                    </div>
                    <div class="click">
                        <img src="../../image/COLLECTION/B&W/COLLECTION_B&W_3.JPG" alt=""/>
                    </div>
                </div>

            </div>
            <div class="content-box">
                <div class="content-box-title">ARCHITECTURE 10/2023</div>
                <div class="content-box-text">
                    <P>Photographs in this collection is all black and white just like the title describes. </P>
                    <p>This treatment may be due to background color clutter or due to the highlight of line and
                        frame. </p>
                    <p>All in all, the atmosphere of B&W is different to colorful photographs. </p>
                    <p>You can pay more attention to the subject instead of brilliant colours.</p>
                </div>
            </div>

        </div>

        <div class="to-top">
            <a href="#top" aria-label="Scroll to Top"><span class="iconfont icon-xiangshangjiantou"></span>up</a>
        </div>
    </div>

    <!--页脚 -->
    <div class="footer-nav">
        <div class="footer-info">
            <div class="footer-group">
                <a class="footer-nav-title" href="../gallery/gallery.html">GALLERY</a>
                <a class="footer-nav-text" href="../gallery/gallery.html">Amoy</a>
                <a class="footer-nav-text" href="../gallery/gallery-1.html">The bank of Laodao river</a>
                <a class="footer-nav-text" href="../gallery/gallery-2.html">UK</a>
            </div>
            <div class="footer-group">
                <a class="footer-nav-title" href="../collection/collection.html">COLLECTION</a>
                <a class="footer-nav-text" href="../collection/collection.html">B&W</a>
                <a class="footer-nav-text" href="../collection/collection-1.html">Architecture</a>
            </div>
            <div class="footer-group">
                <a class="footer-nav-title" href="../introduction/introduction.html">ABOUT YUK1</a>
            </div>
        </div>
    </div>
    <div class="footer-info-2">
        <div class="logo-2"></div>
        <div class="footer-text"><a href="../introduction/introduction.html">@2023 YUK1</a></div>
    </div>
    <!--页脚 -->
</div>
</body>
</html>


<style>

</style>
